<template>
  <div>
    <div class="header">
      <div class="header-zuo">
        <div>海尔账号注册</div>
      </div>
      <div class="header-you">
        <i class="i"></i>
      </div>
    </div>
    <div class="section">
        <div class="section-div">购买、安装、保修、手机注册更方便</div>
        <input class="ipt" type="text" placeholder="手机号" v-model="login.phoneNum">
        <input class="ipt" type="text" placeholder="密码" v-model="login.loginKey">
        <input class="ipt" type="text" placeholder="再次输入密码" v-model="login.loginKeys">
        <div class="formDiv" @click="loginBtn">注册</div>
        <div class="form-ipt">
            <input type="checkbox" v-model="login.isTrue">
            <span>我同意
                <a href="">《海尔注册用户服务条款》</a>
                <a href="">《法律声明及隐私权政策》</a>
            </span>
        </div>
    </div>
    <div class="footer">
        <div class="qq">
             <div class="qq1">
                <img src="../../assets/img/login/qq.png" alt="">
           </div>
           <div class="qq2">QQ</div>
        </div>
        <div class="weibo">
           <div class="weibo1">
                <img src="../../assets/img/login/weibo.png" alt="">
           </div>
           <div class="weibo2">新浪微博</div>
        </div>
        <div class="weixin">
            <div class="weixin1">
                <img src="../../assets/img/login/weixin.png" alt="">
           </div>
           <div class="weixin2">微信</div>
        </div>
        <div class="wangyi">
            <div class="wangyi1">
                <img src="../../assets/img/login/wangyi.png" alt="">
           </div>
           <div class="wangyi2">网易</div>
        </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/login/zuce.css";
import { mapActions } from "vuex";
export default {
   data() {
    return {
      login: {}
    };
  },
  methods: {
    ...mapActions("login", ["getLogon", "resetToken"]),
    gotoLogon() {
      this.$router.push("/denglu");
    },
    loginBtn() {
      if (!this.login.isTrue) {
        this.$message({
          message: '请勾选以下条款',
          type: 'warning'
        });
        return;
      }
      if (!this.login.phoneNum) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        });
        return;
      }
      if (!this.login.loginKey) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        });
        return;
      }
      if (this.login.loginKey != this.login.loginKeys) {
        this.$message({
          message: '密码不一致,请重新输入',
          type: 'warning'
        });
        return;
      }
      this.getLogon(this.login);
      alert("注册成功");
      this.resetToken();
      setTimeout(() => {
        this.gotoLogon();
      }, 1000);
    }
  }
};
</script>

<style scoped>
</style>